<script setup>
defineOptions({
  name: "BannerSwiper",
  type: 0,
  cname: "轮播图",
  icon: "icon-lunbotu",
});

const props = defineProps({
  // 新增高度属性
  height: {
    title: "高度",
    ctype: "number",
    type: [String, Number],
    default: 150,
  },
  // 新增图片列表属性
  imageList: {
    title: "图片列表",
    ctype: "imageList",
    type: Array,
    default: () => [],
  },
});
</script>

<template>
  <el-carousel
    :height="
      typeof props.height === 'number' ? `${props.height}px` : props.height
    "
  >
    <el-carousel-item v-for="(image, index) in props.imageList" :key="index">
      <img
        :src="image.url"
        class="w-full h-full object-cover"
        :alt="`轮播图 ${index + 1}`"
      />
    </el-carousel-item>
    <el-carousel-item v-if="!props.imageList.length">
      <div class="flex items-center justify-center w-full h-full bg-gray-200">
        <span class="text-gray-500">暂无图片</span>
      </div>
    </el-carousel-item>
  </el-carousel>
</template>

<style lang="scss" scoped></style>
